<template>
	<view>
		<view v-if="pagePath == 'workbench'">
			<staging @changeActive="changeActive" />
		</view>
		<view v-if="pagePath == 'approvalCenter'">
			<custom-nav :title="'审批中心'"></custom-nav>
			<view @touchmove.prevent>
				<diy-navTab
					:activeTab="active"
					:tabList="tabList"
					@change="changeTab"
				></diy-navTab>

				<!-- top -->
				<view class="serach-fixed" v-if="!defaultType">
					<serach-button
						:placeholder="'搜索流程、提交人'"
						@serachInput="serachInput"
					></serach-button>
					<!-- 筛选 -->
					<view class="df ac mt10">
						<view
							class="w50 lh80 df ac jsc c6"
							:class="item.checked ? 'g4' : ''"
							v-for="(item, index) in filterArr"
							:key="index"
							@tap="openFilter(item)"
							v-show="isShowFilter(item.type)"
						>
							<view class="w50 text-over tc">{{
								item.name
							}}</view>
							<text
								class="triangle mt10 ml10"
								:class="
									item.checked ? 'bottom-act' : 'bottom-def'
								"
							></text>
						</view>
					</view>
				</view>

				<!-- container -->
				<view
					class="container"
					:style="{
						paddingTop: defaultType ? '116rpx' : '',
						paddingBottom: defaultType ? '30rpx' : '190rpx',
					}"
				>
					<view
						v-show="dataList && dataList.length > 0"
						v-for="(dataItem, index) in dataList"
						:key="index"
						class="item-container"
					>
						<approve-item
							:data="dataItem"
							:active="active"
						></approve-item>
					</view>
					<diy-empty
						v-if="!dataList || dataList.length === 0"
					></diy-empty>
				</view>
			</view>
			<!--筛选下拉框-->
			<view v-if="filterPopupShow" class="filter-popup">
				<view class="filter-bd">
					<view
						:style="{ paddingTop: `calc(${navHeight}px + 280rpx)` }"
					>
						<scroll-view
							:scroll-y="true"
							style="max-height: calc(100vh - 960rpx)"
						>
							<view
								v-if="
									['submitTime'].includes(currentFilterType)
								"
								class="pt20"
							>
								<view class="df jsb pr20 pl20">
									<view
										class="flex-1 pl10 pr10"
										v-for="(item, index) in filterDateArr"
										:key="index"
									>
										<view
											class="tc filter-item"
											:class="
												activeDay === item.value
													? 'active-filter-item'
													: ''
											"
											@tap="choosefilterDate(item)"
										>
											{{ item.name }}
											<text class="ml10">{{
												item.count
											}}</text>
										</view>
									</view>
								</view>
								<view
									class="df ac pl10 pr10 mt20 data-picker-box"
								>
									<image
										src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/tdzbd6utigeypkj9g0hk8kzgk.png"
										style="width: 30rpx; height: 30rpx"
										class="ml20"
									></image>
									<uni-datetime-picker
										type="date"
										v-model="filterStartDate"
										@change="chooseStartDate"
									>
										<view
											:class="
												filterStartDate ? 'g3' : 'c1'
											"
											class="tc"
										>
											{{
												filterStartDate
													? filterStartDate
													: '开始日期'
											}}
										</view>
									</uni-datetime-picker>
									<view class="w10 tc lh80 c1 f32">至</view>
									<uni-datetime-picker
										type="date"
										v-model="filterEndDate"
										@change="chooseEndDate"
									>
										<view
											:class="filterEndDate ? 'g3' : 'c1'"
											class="tc"
										>
											{{
												filterEndDate
													? filterEndDate
													: '结束日期'
											}}
										</view>
									</uni-datetime-picker>
								</view>
							</view>
							<view
								v-if="currentFilterType === 'formType'"
								class="df fx-wp pl20 pr20"
							>
								<view
									class="w50 g3 lh100"
									style="
										max-height: calc(100vh - 960rpx);
										overflow-y: auto;
									"
								>
									<view
										class="pl20 item-form flex-center"
										@tap="chooseH(formItem)"
										:class="
											formItem.groupId === activeFormType
												? 'item-form-active'
												: ''
										"
										v-for="formItem in formTypeList"
										:key="formItem.groupId"
									>
										<view class="text-over">{{
											formItem.groupName
										}}</view>
										<view class="ml10">{{
											formItem.count
										}}</view>
									</view>
								</view>
								<view class="w50 g3 lh100 over-scroll">
									<view
										class="pl20 bd-bottom-e f30 df ac"
										:class="
											activeSecondType ===
											secondItem.formId
												? 'active-color fw600'
												: 'c6'
										"
										v-for="secondItem in formTypeSecondList"
										:key="secondItem.formId"
										@tap="chooseS(secondItem)"
									>
										<view class="text-over mr10">{{
											secondItem.formName
										}}</view>
										<view class="ml10">{{
											secondItem.count
										}}</view>
									</view>
								</view>
							</view>
							<view
								v-if="currentFilterType === 'approveStatus'"
								class="grid"
							>
								<view
									class="filter-item"
									:class="
										item.approveStatus ===
										activeApproveStatus
											? 'active-filter-item'
											: ''
									"
									v-for="(item, index) in approveStatusList"
									:key="index"
									@tap="chooseApproveStatus(item)"
								>
									{{ item.approveName }}
									<text class="ml10">{{ item.count }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="filter-bottom">
						<button class="reset-button w45" @tap="filterReset">
							重置
						</button>
						<button class="primary-button w45" @tap="filterSubmit">
							确定
						</button>
					</view>
				</view>
				<view
					class="filter-popup-mask"
					@tap="closeFilter"
					catchtouchmove="true"
				></view>
			</view>
		</view>
		<view v-if="pagePath == 'statistics'">
			<statistics />
		</view>
		<view v-if="!defaultType">
			<custom-tabbar
				:pagePath="pagePath"
				:approvalNumber="approvalNumber"
				:pathType="'subPackagesIndex'"
				@changeTabbar="changeTabbar"
			/>
		</view>
	</view>
</template>
<script>
import staging from './components/staging.vue'
import statistics from './components/statistics.vue'
import diyNavTab from '@/components/diy-navTab/diy-navTab.vue'
import serachButton from '@/components/serach-button/serach-button.vue'
import approveItem from '@/subPackagesIndex/components/approve-item/approve-item.vue'
import { getTargetDay } from '@/common/utils.js'
import getDateFn from '@/common/getDateFn.js'
export default {
	components: {
		staging,
		statistics,
		diyNavTab,
		serachButton,
		approveItem,
	},
	data() {
		return {
			navHeight: 0, //导航栏总体高度
			approvalNumber: 0,
			pagePath: 'workbench',
			active: 1,
			defaultType: '',
			formId: 0,
			tabList: [
				{ value: 1, text: '待处理', src: 'task/todoList' },
				{ value: 2, text: '已处理', src: 'task/doneList' },
				{ value: 3, text: '我发起', src: 'task/mySubmitted' },
				{ value: 4, text: '关于我的', src: 'task/getCcMe' },
			],
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			hasMore: false,
			serachVal: '',
			filterArr: [
				{
					type: 'formType',
					name: '表单类型',
					checked: false,
				},
				{
					type: 'approveStatus',
					name: '审批状态',
					checked: false,
				},
				{
					type: 'submitTime',
					name: '提交时间',
					checked: false,
				},
			],
			currentFilterType: '',
			filterPopupShow: false,
			filterDateArr: [
				{
					name: '全部',
					count: 0,
					value: '',
				},
				{
					name: '今日',
					count: 0,
					value: 0,
				},
				{
					name: '昨日',
					count: 0,
					value: -1,
				},
				{
					name: '近7日',
					count: 0,
					value: -7,
				},
			],
			approveStatusList: [],
			formTypeList: [],
			formTypeSecondList: [],
			activeApproveStatus: '',
			filterStartDate: '',
			filterEndDate: '',
			activeDay: '',
			activeFormType: -100,
			activeSecondType: '',
			// 搜索输入框的数据
			multifunctionalParam: '',
			loading: false,
		}
	},
	onLoad(options) {
		this.pagePath = options.pagePath
		this.formId = options.formId
		this.defaultType = options.defaultType
	},
	onShow() {
		this.getInstanceCount()
		if (this.pagePath === 'approvalCenter') {
			this.pageIndex = 1
			this.hasMore = false
			this.dataList = []
			this.getDataList(this.active)
		}
	},
	onReachBottom() {
		if (this.pagePath === 'approvalCenter') {
			if (this.hasMore) {
				this.pageIndex = this.pageIndex + 1
				this.getDataList(this.active)
			}
		}
	},
	mounted() {
		this.navHeight = uni.getStorageSync('navHeight')
	},
	methods: {
		fliterDateName(row) {
			let name = ''
			switch (row) {
				case '':
					name = '全部'
					break
				case 1:
					name = '今日'
					break
				case 2:
					name = '昨日'
					break
			}
			return name
		},
		// 选择开始时间
		chooseStartDate(event) {
			this.filterStartDate = event
			this.activeDay = ''
		},
		//选择结束时间
		chooseEndDate(event) {
			this.filterEndDate = event
			this.activeDay = ''
		},
		//筛选时间
		choosefilterDate(row) {
			this.activeDay = row.value
			if (row.value !== '') {
				this.filterStartDate = getTargetDay(row.value)
				this.filterEndDate =
					row.value === -1
						? getTargetDay(row.value)
						: getDateFn.getDate()
			} else if (row.value === '') {
				this.filterStartDate = ''
				this.filterEndDate = ''
			}
		},
		//筛选审批状态
		chooseApproveStatus(row) {
			this.activeApproveStatus = row.approveStatus
		},
		filterReset() {
			const type = this.currentFilterType
			switch (type) {
				case 'approveStatus':
					this.activeApproveStatus = ''
					break
				case 'submitTime':
					this.activeDay = ''
					this.filterStartDate = ''
					this.filterEndDate = ''
					break
				case 'formType':
					this.activeFormType = -100
					this.activeSecondType = ''
					this.formTypeList = []
					this.formTypeSecondList = []
					this.getFilterData('listFormGroupQueryCount')
					this.getFilterData('listFormTypeQueryCount')
					break
			}
		},
		chooseH(row) {
			this.activeFormType = row.groupId
			this.getFilterData('listFormTypeQueryCount')
			this.activeSecondType = ''
		},
		chooseS(row) {
			this.activeSecondType = row.formId
		},
		setFilterBanner() {
			this.filterArr.forEach((item) => {
				switch (item.type) {
					case 'submitTime':
						if (
							this.activeDay !== '' ||
							(this.activeDay === '' && !this.filterStartDate)
						) {
							item.name = this.filterDateArr.find(
								(i) => i.value === this.activeDay
							).name
						}
						if (this.activeDay === '' && this.filterStartDate) {
							item.name = '自定义'
						}
						if (this.activeDay == '' && !this.filterStartDate) {
							item.name = '提交时间'
						}
						break
					case 'approveStatus':
						if (this.activeApproveStatus === '') {
							item.name = '审批状态'
						} else {
							item.name = this.approveStatusList.find(
								(i) =>
									i.approveStatus === this.activeApproveStatus
							).approveName
						}
						break
					case 'formType':
						this.formTypeHandler(item)
						break
				}
			})
		},
		formTypeHandler(item) {
			let groupName = ''
			if (this.formTypeList && this.formTypeList.length > 0) {
				groupName = this.formTypeList.find(
					(i) => i.groupId === this.activeFormType
				).groupName
			}
			if (!this.activeSecondType) {
				item.name =
					(groupName === '全部' ? '表单类型' : groupName) ||
					'表单类型'
			} else {
				const formName = this.formTypeSecondList.find(
					(i) => i.formId === this.activeSecondType
				).formName
				item.name = formName
			}
		},
		filterSubmit() {
			this.pageIndex = 1
			this.hasMore = false
			this.dataList = []
			this.getDataList(this.active)
			this.setFilterBanner()
			this.filterPopupShow = false
		},
		serachInput(val) {
			this.pageIndex = 1
			this.hasMore = false
			this.dataList = []
			this.multifunctionalParam = val
			this.getDataList(this.active)
			if (val) {
				this.filterPopupShow = false
			}
		},
		isShowFilter(type) {
			if (type === 'approveStatus' && [2, 3, 4].includes(this.active)) {
				return true
			}
			if (type === 'submitTime' && this.active == 1) {
				return true
			}
			if (type === 'formType') {
				return true
			}
		},
		getFilterData(type) {
			uni.showLoading({
				title: '加载中...',
			})
			const baseUrl = `wflow/wflow/smallProgram/process/task/statistics/${type}`
			this.$request
				.request(baseUrl, {
					method: 'post',
					data: {
						businessType: this.active,
						multifunctionalParam: this.multifunctionalParam,
						status: this.activeApproveStatus,
						submitTimeStartTime: this.filterStartDate,
						submitTimeEndTime: this.filterEndDate,
						groupId: this.activeFormType,
						formId: this.activeSecondType,
					},
				})
				.then((res) => {
					if (type !== 'listFormGroupQueryCount') {
						uni.hideLoading()
					}
					switch (type) {
						case 'listFormGroupQueryCount':
							this.formTypeList = res
							break
						case 'listApproveStatusQueryCount':
							this.approveStatusList = res
							break
						case 'listFormTypeQueryCount':
							this.formTypeSecondList = res
							break
						case 'listSubmitTimeTypeQueryCount':
							this.filterDateArr.forEach((item, index) => {
								item.count = res[index].count
							})
							break
					}
				})
		},
		//打开筛选框
		openFilter(row) {
			this.filterArr.forEach((item) => {
				item.checked = false
				if (row.type === item.type) {
					item.checked = true
				}
			})
			this.currentFilterType = row.type
			switch (row.type) {
				case 'formType':
					this.formTypeList = []
					this.formTypeSecondList = []
					this.getFilterData('listFormGroupQueryCount')
					this.getFilterData('listFormTypeQueryCount')
					break
				case 'approveStatus':
					this.getFilterData('listApproveStatusQueryCount')
					break
				case 'submitTime':
					this.getFilterData('listSubmitTimeTypeQueryCount')
					break
			}
			this.filterPopupShow = true
		},
		//关闭筛选框
		closeFilter() {
			this.currentFilterType = ''
			this.filterPopupShow = false
		},
		jumpDetail(value) {
			uni.navigateTo({
				url: `/subPackagesIndex/pages/index/approval/mainSub/approvalDetail?instanceId=${
					value.instanceId ? value.instanceId : undefined
				}&nodeId=${value.nodeId ? value.nodeId : undefined}&type=${
					this.active
				}`,
			})
		},
		changeTab(value) {
			if (this.loading) {
				uni.showToast({
					title: `操作太快啦~`,
					icon: 'none',
				})
				return
			}
			this.dataList = []
			this.pageIndex = 1
			this.pageSize = 10
			this.multifunctionalParam = ''
			this.filterStartDate = ''
			this.filterEndDate = ''
			this.activeDay = ''
			this.activeApproveStatus = ''
			this.activeFormType = -100
			this.activeSecondType = this.defaultType
				? this.activeSecondType
					? this.activeSecondType
					: this.formId
				: ''
			this.active = Number(value)
			this.filterPopupShow = false
			this.filterArr = [
				{
					type: 'formType',
					name: '表单类型',
				},
				{
					type: 'approveStatus',
					name: '审批状态',
				},
				{
					type: 'submitTime',
					name: '提交时间',
				},
			]
			this.getDataList(Number(value))
		},

		getDataList(type) {
			this.loading = true
			uni.showLoading({
				title: '加载中...',
			})
			const obj = this.tabList.find((i) => i.value == type)
			const baseUrl = `wflow/wflow/smallProgram/process/${obj.src}`
			this.$request
				.request(baseUrl, {
					method: 'post',
					data: {
						pageNo: this.pageIndex,
						pageSize: this.pageSize,
						multifunctionalParam: this.multifunctionalParam,
						startDay: this.filterStartDate,
						endDay: this.filterEndDate,
						groupId: this.activeFormType,
						formId: this.activeSecondType || this.formId,
						status: this.activeApproveStatus,
					},
				})
				.then((res) => {
					uni.hideLoading()
					this.loading = false
					if (res.records && res.records.length > 0) {
						this.dataList = this.dataList.concat(res.records)
						this.hasMore = true
					} else {
						this.hasMore = false
					}
				})
		},
		changeTabbar(row) {
			this.pagePath = row.pagePath
			if (row.pagePath === 'approvalCenter') {
				this.pageIndex = 1
				this.hasMore = false
				this.dataList = []
				this.getDataList(this.active)
			}
		},
		changeActive(row) {
			this.pageIndex = 1
			this.hasMore = false
			this.dataList = []
			this.active = row.approvalActive
			this.pagePath = row.pagePath
			this.getDataList(this.active)
		},
		getInstanceCount() {
			this.$request
				.request('wflow/wflow/home/getCornerMarkCount', {
					data: {},
				})
				.then((res) => {
					this.approvalNumber = res.todo + res.cc
				})
		},
	},
}
</script>
<style scoped lang="scss">
.container {
	font-size: 30rpx;
	padding: 290rpx 20rpx 190rpx 20rpx;
}
.item-container {
	background: #fff;
	padding: 20rpx;
	margin: 20rpx 0;
	border-radius: 8rpx;
}
.status-COMPLETE {
	color: #52c41a;
}
.status-RUNNING {
	color: #409eff;
}
.status-refuse-end {
	color: #bd3124;
}
.status-cancel-end {
	color: #e6a23c;
}
/deep/ .tab-item {
	font-size: 32rpx !important;
}
.pb120 {
	padding-bottom: 120rpx;
}
.serach-fixed {
	position: fixed;
	padding-top: 120rpx;
	border-top: 2rpx solid #efefef;
	width: 100%;
	background: #fff;
	z-index: 15;
	border-bottom: 2rpx solid #efefef;
}
.data-picker-box {
	margin: 20rpx 30rpx 10rpx;
	border-radius: 6rpx;
	border: 2rpx solid rgba(217, 217, 217, 1);
	font-size: 32rpx;
}
.filter-item {
	background-color: rgba(239, 239, 239, 1);
	color: rgba(108, 108, 108, 1);
	border-radius: 8rpx;
	font-size: 30rpx;
}
.active-filter-item {
	color: #3a74fc;
	border: 2rpx solid #3a74fc;
	font-weight: 600;
	background: #fff;
}
.grid {
	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-gap: 10rpx;
	padding: 30rpx 20rpx 30rpx 10rpx;
}
.c1 {
	color: #c1c1c1;
}
.item-form {
	background: #fbfbfb;
	font-size: 30rpx;
	text-align: center;
}
.item-form-active {
	background: #fff;
	color: #3a74fc;
	font-weight: 700;
}
.active-color {
	color: #3a74fc;
}
.c6 {
	color: #6c6c6c;
}
.over-scroll {
	max-height: calc(100vh - 960rpx);
	overflow-y: auto;
}

/deep/ .uni-forms-item {
	margin-bottom: -28rpx !important;
	align-items: center !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/deep/ .uni-forms-item__label {
	padding-bottom: 0rpx !important;
	color: #9a9a9a !important;
	font-size: 28rpx !important;
	width: auto !important;
	// height: 0rpx !important;
}
/deep/ .uni-forms-item__content {
	font-size: 28rpx !important;
	color: #9a9a9a !important;
	margin-left: -30rpx !important;
}
.filter-bd {
	max-height: calc(100vh - 400rpx);
}
</style>
